<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <a href="/news">新闻</a>
        |
        <a href="/makefriend">交友</a>
        <div id="content"></div>
    </div>
</body>

</html>
<script>
    // 1. hash 模式
    // 优点：兼容性好，不需要服务器配置
    // 缺点：url 不美观，hash 值会出现在 url 中
    // onhashchange = function () {
    //     let hash = location.hash;
    //     console.log(hash);
    //     switch (hash) {
    //         case '#/news':
    //             document.getElementById('content').innerHTML = '<h1>新闻</h1>'
    //             break;
    //         case '#/makefriend':
    //             document.getElementById('content').innerHTML = '<h1>交友</h1>'
    //     }
    // }

    // 2. history 模式
    // 优点：url 美观，不需要服务器配置
    // 缺点：需要服务器配置，否则刷新页面会 404
    //用了H5给history对象新增的方法 pushState、replaceState
    let aa = document.querySelectorAll('a')
    aa.forEach(item => {
        item.onclick = function (e) {
            e.preventDefault()
            console.log(this.getAttribute('href'));
            let url = this.getAttribute('href')
            //调用history的方法pushState 浏览器路径会变化,但不会立刻向服务器发起请求
            history.pushState({ name: '韩梅梅' }, null, url)
        }
    })

    //history模式监听事件 电浏览器的返回和前进按钮才会触发这个事件
    onpopstate = function (e) {
        console.log(e);

    }
</script>